import { useState, useRef, useEffect } from "react";
import { Input, Button, Avatar } from "antd";
import { SendOutlined } from "@ant-design/icons";
import styles from "./ChatBox.module.scss";

interface Message {
  id: string;
  content: string;
  isUser: boolean;
  timestamp: Date;
}

interface ChatBoxProps {
  messages: Message[];
  agentAvatar: string;
  userAvatar: string;
  onSendMessage: (content: string) => void;
  isTyping?: boolean;
}

const ChatBox = ({
  messages,
  agentAvatar,
  userAvatar,
  onSendMessage,
  isTyping = false,
}: ChatBoxProps) => {
  const [inputValue, setInputValue] = useState("");
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    scrollToBottom();
  }, [messages, isTyping]);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  const handleSend = () => {
    if (inputValue.trim()) {
      onSendMessage(inputValue);
      setInputValue("");
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className={styles.chatBox}>
      <div className={styles.messagesContainer}>
        {messages.map((message) => (
          <div
            key={message.id}
            className={`${styles.messageWrapper} ${
              message.isUser ? styles.userMessage : styles.aiMessage
            }`}
          >
            <div className={styles.messageContent}>
              {!message.isUser && (
                <Avatar
                  src={agentAvatar}
                  size={32}
                  className={styles.messageAvatar}
                />
              )}
              <div className={styles.messageBubble}>{message.content}</div>
              {message.isUser && (
                <Avatar
                  src={userAvatar}
                  size={32}
                  className={styles.messageAvatar}
                />
              )}
            </div>
            <div className={styles.messageTime}>
              {message.timestamp.toLocaleTimeString([], {
                hour: "2-digit",
                minute: "2-digit",
              })}
            </div>
          </div>
        ))}
        {isTyping && (
          <div className={`${styles.messageWrapper} ${styles.aiMessage}`}>
            <div className={styles.messageContent}>
              <Avatar
                src={agentAvatar}
                size={32}
                className={styles.messageAvatar}
              />
              <div className={styles.messageBubble}>
                <span className={styles.typingIndicator}>
                  <span></span>
                  <span></span>
                  <span></span>
                </span>
              </div>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>

      <div className={styles.inputContainer}>
        <Input.TextArea
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="输入消息..."
          autoSize={{ minRows: 1, maxRows: 4 }}
          className={styles.input}
        />
        <Button
          type="primary"
          icon={<SendOutlined />}
          onClick={handleSend}
          disabled={!inputValue.trim()}
          className={styles.sendButton}
        />
      </div>
    </div>
  );
};

export default ChatBox;
